<template>
  <div class="">
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="name" label="用户名" />
        <el-table-column prop="sex" label="性别" v-slot="{ row }">
          <el-tag :type="row.sex == 0 ? 'primary' : 'danger'">{{
            row.sex == 0 ? "男" : "女"
          }}</el-tag>
        </el-table-column>
        <el-table-column prop="avatar" label="头像" v-slot="{ row }">
          <el-image
            style="width: 50px; height: 50px; border-radius: 50%"
            :src="URL + '/' + row.avatar"
          />
        </el-table-column>
        <el-table-column prop="phonenumber" label="电话号码" />
        <el-table-column prop="user_type" label="用户会员" v-slot="{ row }">
          <el-tag :type="row.user_type == 0 ? 'success' : 'warning'">{{
            row.user_type == 0 ? "普通会员" : "超级会员"
          }}</el-tag>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        :page-size="pageSize"
        @change="changePage"
        style="display: flex; justify-content: center"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
const URL = import.meta.env.VITE_APP_API_URL;
import UserAPI from "@/api/user/index";
import { ReqUserList } from "@/api/user/model";
import { useRoute, useRouter } from "vue-router";
const $router = useRouter();
const page = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
const tableData = ref<ReqUserList[]>([]);

// 分页
const changePage = (pageNum: number) => {
  page.value = pageNum;
  getUserList();
};

// 获取用户列表
const getUserList = async () => {
  let result = await UserAPI.reqUserList({
    page: page.value,
    pageSize: pageSize.value,
  });
  console.log(result);
  tableData.value = result.rows;
  total.value = result.count;
};
onMounted(() => {
  getUserList();
});
</script>

<style scoped lang="scss"></style>
